<template>
  <view class="content">
    <view class="title">{{ name }}</view>
    <u-button type="primary" text="获取当前位置" @click="getlocation"></u-button>
    <view class="one">经度：{{ longitude }};</view>
    <view class="one">纬度：{{ latitude }};</view>
    <view class="one">中文详细地址信息：{{ locationaddress }}</view>
    <u-line margin="40rpx 0rpx 40rpx 0rpx"></u-line>
    <view class="page-section page-section-gap">
      <map id="map" style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="markers"
        scale="16" :show-compass='true' :circles="circles" :controls="controls" show-location @controltap="onControltap">
      </map>
      <cover-image class="cover-view" src="/static/icon/address.png" @click="onControltap"></cover-image>
    </view>
    <u-button type="primary" text="打开地图" @click="openmap"></u-button>
  </view>
</template> 
 
<script>
export default {
  data() {
    return {
      name: 'APP获取当前位置信息-----高德地图',
      longitude: '',
      latitude: '',
      address: '',
      controls: [{
        //在地图上显示控件，控件不随着地图移动
        id: 0, //控件id
        iconPath: "/static/原点.png", //显示的图标
        clickable: true,
        position: {
          //控件在地图的位置
          left: 200,
          top: 200,
          width: 60,
          height: 60,
        },
      },],
      markers: '',
      locationaddress: '',
      circles: '',
    };
  },
  onLoad() {
    //APP开发获取当前的位置信息
    // #ifdef APP-PLUS
    this.getlocation(); //获取当前位置信息
    // #endif

  },
  methods: {

    // 获取地图定位
    getlocation() {
    	var that = this
    	uni.getLocation({
    		type: 'gcj02', //国测局
    		geocode: 'true',
    		success: function(res) {
    			console.log('当前位置的经度：' + res.longitude);
    			console.log('当前位置的纬度：' + res.latitude);
    			console.log('当前位置：' + JSON.stringify(res));
    			// 创建地图坐标对象
    			var point = new plus.maps.Point(res.longitude, res.latitude);
    			//静态方法，反向地理编码
    			plus.maps.Map.reverseGeocode(point, {}, (event) => {
    				var address = event.address; // 转换后的地理位置
    				that.locationaddress = address // 重新赋值
    			}, function(e) {
    				console.log("失败回调", e);
    			});
    			// 赋值经纬度,从而得到当前位置
    			that.latitude = res.latitude
    			that.longitude = res.longitude
    			// 地图上显示所在图标开始
    			let arr = [{
    					id: 0,
    					longitude: res.longitude,
    					latitude: res.latitude,
    					name: "所在位置"
    				},
    				{
    					id: 1,
    					latitude: 36.647,
    					longitude: 114.550,
    					name: "所在位置"
    				}
    			]
    			let markers = []
    			for (var i = 0; i < arr.length; i++) {
    				markers = markers.concat({
    					id: arr[i].id,
    					latitude: arr[i].latitude, //纬度
    					longitude: arr[i].longitude, //经度
    					callout: { //自定义标记点上方的气泡窗口 点击有效
    						content: arr[i].name, //文本
    						color: '#ffaa00', //文字颜色
    						fontSize: 18, //文本大小
    						borderRadius: 8, //边框圆角
    						bgColor: '#00c16f', //背景颜色
    						display: 'ALWAYS', //常显
    					},
    					label: { //标签备注
    						content: '',
    						bgColor: 'red'
    					},
    					iconPath: '/static/dingwei.png', //	显示的图标
    					width: 50,
    					height: 50,
    					position: { //控件位置
    						left: 0,
    						top: 0,
    						width: 0,
    						height: 0
    					}
    				})
    			}
    			that.markers = markers; // markers就是地图选点一样的功能,显示小坐标
    			// 地图上显示所在图标结束
    			that.controls = [{
    				id: 1,
    				position: { //控件在地图的位置
    					left: 15,
    					top: 15,
    					width: 10,
    					height: 10
    				},
    				iconPath: '/static/定位.png'
    			}]
    			that.circles = [{ //在地图上显示圆
    					latitude: res.latitude,
    					longitude: res.longitude,
    					fillColor: "#3BBAFD29", //填充颜色（透明度）
    					color: "#3BBAFD", //描边的颜色
    					radius: 160, //半径
    					strokeWidth: 2 //描边的宽度
    				},
    				{ //在地图上显示圆
    					latitude: 36.647,
    					longitude: 114.550,
    					fillColor: "#3BBAFD29", //填充颜色
    					color: "#3BBAFD", //描边的颜色
    					radius: 100, //半径
    					strokeWidth: 2 //描边的宽度 
    				},
    			]
    		},
    		// 定位失败
    		fail: function(err) {
    			console.log(err)
    		}
    	})
    },
    // 点击刷新方法
    refresh(e) {
      this.getlocation();
    },
    // 回到定位点
    onControltap(control) {
      console.log('点击了回到原点')
      uni.createMapContext("map", this).moveToLocation({
        longitude: this.longitude,
        latitude: this.latitude,
      });
    },
    //点击打开第三方地图APP
    openmap() {
      // #ifdef APP
      this.openNavigation(this.longitude, this.latitude, this.locationaddress)
      //高德地图
      // #endif
    },
    //打开地图
    // 导航 会打开导航菜单供用户选择
     // 导航 会打开导航菜单供用户选择
     openNavigations(longitude, latitude, name) {
      console.log(longitude, latitude, name)
      let url = ""; // app url
      let webUrl = ""; // web url 用来为用户未安装导航软件时打开浏览器所使用url
      // let qqmapkey = "Z3PBZ-XRM-OB66T-6TPXJ-XGPM6-ZDBY6"
      plus.nativeUI.actionSheet({ //选择菜单
        title: "选择地图应用",
        cancel: "取消",
        buttons: [{
          title: "高德地图"
        }] // 可选的地图类型
      }, (e) => {
        // 判断用户选择的地图
        switch (e.index) {
          //下面是拼接url,不同系统以及不同地图都有不同的拼接字段
          case 1: //打开高德地图
            if (plus.os.name == "Android") { // 安卓
              url =
                `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
            } else { //苹果
              url =
                `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
            }
            webUrl =
              `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${name}&src=mypage&coordinate=gaode`
            break;
        }
        // 如果选中
        if (url != "") {
          url = encodeURI(url);
          // console.log(url, '地址')
          // 打开 app 导航 
          plus.runtime.openURL(url, (err) => { // 失败回到
            // 毕竟用户可能没有安装app但一定安装的有浏览器						
            // 如果失败则说明未安装 直接 打开网页版进行导航
            let chooseMap = '高德地图'
            uni.showModal({
              title: '提示',
              content: '检测到您本机暂未安装' + chooseMap + '应用，请先去应用市场安装。',
              confirmText: '确定', //确定文本的文字
              cancelText: '取消', //确定文本的文字
              showCancel: false, //没有取消按钮的弹框
              success: function (res) {

              }
            })
          });
        }
      })
    }
  }
}
</script>
 
<style lang="scss" scoped>
.content {
  width: 100%;

  .page-section {
    position: relative;

    .cover-view {
      background: rgba(255, 255, 255, 0.5);
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      position: absolute;
      z-index: 9999;
      right: 20rpx;
      bottom: 100rpx;
    }
  }
}
</style>